<template>
  <!-- 服务专栏 -->
  <swiper :indicator-dots="false" class="serves-container marginT30-jlsd2022">
    <swiper-item
      class="item-box-serve-content"
      v-for="(serves, index) in serveData"
      :key="`serves${index}`"
    >
      <view
        v-for="(item, index) in serves"
        :key="item.id"
        class="item-serve-content"
        @click="navToFloatingWindow(item.url)"
      >
        <image class="img-serve-content" :src="item.thumb"></image>
        <view class="title-serve-content">{{ item.title }}</view>
      </view>
    </swiper-item>
  </swiper>
  <!-- <view class="serves-container marginT30-jlsd2022">
    <view class="item-box-serve-content" v-for="(serves,index) in serveData" :key="`serves${index}`">
      <view
        v-for="(item, index) in serves"
        :key="item.id"
        class="item-serve-content"
        @click="navToFloatingWindow(item.url)"
      >
        <image class="img-serve-content" :src="item.thumb"></image>
        <view class="title-serve-content">{{ item.title }}</view>
      </view>
    </view>
  </view> -->
</template>

<script>
  import { mapGetters } from 'vuex';
  import * as Api from '@/server/index.js';
  import * as Utils from '@/utils/index.js';
  export default {
    name: 'servesComp',
    data() {
      return {
        serveData: [], // 服务专栏
      };
    },
    computed: {
      ...mapGetters(['token']),
    },
    mounted() {
      this.getServeData(); //首页服务
    },
    methods: {
      async getServeData() {
        try {
          let par = { categoryId: 2130, current: 1, size: 10 };
          const { data: res } = await Api.cms.getCmsArticle(par);
          this.serveData = Utils.util.chunkArray(res.data.items, 10);
        } catch (e) {}
      },

      navToFloatingWindow(url) {
        h5uni.navigateTo({
          url: `/pages/webview/index?url=${encodeURIComponent(
            url,
          )}&thumb=&title=&description=&copyfrom=unlock&id=&wxlsToken=${
            this.token
          }`,
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  /*------------------------------------*/
  .marginT30-jlsd2022 {
    margin-top: 30rpx;
  }
  // 服务专栏
  .serves-container {
    width: 100%;
  }
  .item-box-serve-content {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .item-serve-content {
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
  }
  .img-serve-content {
    // padding: 30rpx;
    // padding: 10rpx 10rpx;
    width: 80rpx;
    height: 80rpx;
    border-radius: 20rpx;
    margin-bottom: 4px;
  }
  .title-serve-content {
    font-size: 24rpx;
    text-align: center;
  }
</style>
